<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      :info="data"
      :current="current"
      field="content"
    >
      <swiper
        class="swiper-box"
        :current="swiperDotIndex"
        @change="changeSwiper"
        autoplay
        interval="5000"
        circular
      >
        <swiper-item
          v-for="(item, index) in data"
          :key="index"
        >
          <view class="swiper-item">
            <image
              :src="item.image"
              mode="aspectFill"
              :draggable="false"
            />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section
      title="首页管理"
      type="line"
    ></uni-section>
    <view class="grid-body">
      <uni-grid
        :column="4"
        :showBorder="false"
      >
        <uni-grid-item>
          <view
            class="grid-item-box"
            @tap="myequiment"
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mkApplet/my_equiment.png"
              style="width: 30px; height: 30px"
            ></image>
            <text class="text">我的设备</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view
            class="grid-item-box"
            @tap="myMaintenance"
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mkApplet/maintenance.png"
              style="width: 30px; height: 30px"
            ></image>
            <text class="text">维保管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view
            class="grid-item-box"
            @tap="openBluetoothAdapter"
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mkApplet/device_net.png"
              style="width: 30px; height: 30px"
            ></image>
            <text class="text">蓝牙链接</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view
            class="grid-item-box"
            @tap="productIntroduction"
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mkApplet/product_intro.png"
              style="width: 30px; height: 30px"
            ></image>
            <text class="text">产品介绍</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view
            class="grid-item-box"
            @tap="contactUs"
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mkApplet/contact_us.png"
              style="width: 30px; height: 30px"
            ></image>
            <text class="text">联系我们</text>
          </view>
        </uni-grid-item>

        <!-- <uni-grid-item>
          <view
            class="grid-item-box"
            @tap="jumper"
          >
            <image
              src="https://mkservice.mk-iot.com/subFile/mkApplet/contact_us.png"
              style="width: 30px; height: 30px"
            ></image>
            <text class="text">跳转测试</text>
          </view>
        </uni-grid-item> -->
      </uni-grid>
    </view>
  </view>
</template>

<script>
  import {
    getEquipment,
    updateEquipment,
  } from '@/api/system/equiment/equipment.js'
  import { getUserProfile } from '@/api/system/user'

  export default {
    data() {
      return {
        url: '',
        userId: null,
        current: 0,
        swiperDotIndex: 0,
        data: [
          {
            image: 'https://mkservice.mk-iot.com/subFile/mkApplet/banner1.png',
          },
          {
            image: 'https://mkservice.mk-iot.com/subFile/mkApplet/banner2.png',
          },
          {
            image: 'https://mkservice.mk-iot.com/subFile/mkApplet/banner3.png',
          },
        ],
      }
    },
    onLoad() {
      //重新进入首页查询userid
      getUserProfile().then((response) => {
        this.userId = response.data.userId
      })
      //清除门店缓存
      uni.removeStorageSync('storeId')
    },
    methods: {
      changeSwiper(e) {
        this.current = e.detail.current
      },
      //我的设备
      myequiment() {
        this.$tab.navigateTo('/devicelistpkg/index/index?userId=' + this.userId)
      },
      //维保管理
      myMaintenance() {
        this.$tab.navigateTo('/subpkg/index/index')
      },
      //维修报表，管理员查询所有的，报修人员查看自己的
      maintenanceReport() {
        this.$tab.navigateTo(
          '/subpkg/reportforms/report_forms?userId=' + this.userId
        )
      },
      //跳转链接mqtt显示数据
      mqttToPage() {
        this.$tab.navigateTo('/subpkg/mqttPage/index')
      },
      //跳转蓝牙链接界面
      openBluetoothAdapter() {
        this.$tab.navigateTo('/subpkg/mqttBluetoothAdapter/index')
      },
      contactUs() {
        this.$tab.navigateTo('/subpkg/contactUs/index')
      },
      //产品介绍
      productIntroduction() {
        this.$tab.navigateTo('/subpkg/productIntroduction/index')
      },
      //跳转配网模式
      gotoEquipmentNetwork() {
        this.$tab.navigateTo('/subpkg/equipmentNet/index')
      },

      jumper() {
        this.$tab.navigateTo('/test/index/index')
      },
    },

    // 分享
    onShareAppMessage(res) {
      // 通过button按钮触发
      if (res.from === 'button') {
        console.log(res.target)
      }
      return {
        title: '安卓版测试按钮', //分享标题
        path: '/test/test/test', //分享链接
      }
    },
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f5f6f7;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>
